import React, { useState } from 'react'
import './style/login.scss'
import { useNavigate } from 'react-router-dom'
import { Toast } from 'antd-mobile'
import axios from 'axios'
import 'animate.css'
export default function Login() {
  let nav=useNavigate()
  let [tel, setTel] = useState('')
  let [pwd,setPwd]=useState('')
  return (
    <div className='login'>
          <h1>您好</h1>
          <div className='input'>
            <input value={tel} placeholder='手机号/邮箱' onChange={(e)=>{setTel(e.target.value)}}></input>
            <input value={pwd} type='password' placeholder='密码' onChange={(e) => { setPwd(e.target.value) }}></input>
            <p><span onClick={()=>{nav('/forget')}}>忘记密码</span><span onClick={()=>{nav('/loginY')}} className='Y'>验证码登录</span></p>
        <button className='animate__animated animate__slideInUp' onClick={async() => {
          let obj = {tel,pwd}
          let res = await axios.post('http://localhost:3000/zjj/login', obj)
          if (res.data.code === 200) {
            sessionStorage.setItem('token', res.data.accessToken)
            sessionStorage.setItem('refToken', res.data.refToken)
            sessionStorage.setItem('tel',tel)
            sessionStorage.setItem('_id',res.data._id)
            nav('/jjthome')
          } else {
            Toast.show({
              content:res.data.msg
            })
          }
            }}>登录</button>
          </div>
          <p className='footer'>还没有账号？<span onClick={()=>{nav('/register')}}>去注册</span></p>
    </div>
  )
}
